<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Expires" content="0"/>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/favicon2.ico}">
    <link rel="stylesheet" th:href="@{/static/plugins/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/static/css/layout.css}">
    <link rel="stylesheet" th:href="@{/static/css/common.css}">
    <style>
        .page-content {
            padding: 10px;
        }

        .layui-upload-img {
            width: 160px;
            height: 160px;
            border: 1px solid #ddd;
            text-align: center;
            cursor: pointer;
        }
        a{
            color:cornflowerblue;
        }
        a:hover{
            color:blue;
        }
    </style>
</head>
<body>
<div class="page-content">
        <div class="layui-upload">
                <blockquote class="layui-elem-quote">点击图片上传评估表(小于5m的图片)</blockquote>
                <img class="layui-upload-img" style="margin-left: 95px;" src="/static/imgs/imgup.png" id="sctp">
                <input id="tjpgid" th:value="${id}" hidden>
        </div>
</div>
<script th:src="@{/static/plugins/jquery.js}"></script>
<script th:src="@{/static/plugins/layui/layui.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/plugins/jquery-migrate-1.2.1.min.js}"></script>
<script th:src="@{/static/plugins/jquery.jqprint-0.3.js}"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['element', 'form', 'upload'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , upload = layui.upload,
            form = layui.form;

        //上传评估表
        upload.render({
            elem: '#sctp'
            ,url: '/storage/files/ul'
            ,field: 'file'
            ,accept:"images"
            ,acceptMime:"image/jpg,image/jpeg,image/png"
            ,size:5120
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                var that = this;
                obj.preview(function(index, file, result){
                    $(that.elem).attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code != 200){
                    return layer.msg('上传失败');
                }
                //上传成功
                var $target = $(this.elem);
                $.ajax({
                    url:"/gbassessRecords/upload",
                    type:'POST',
                    dataType:'JSON',
                    data:{id:$("#tjpgid").val(),fileName:'能力评估表',filePath:res.data.path},
                    success:function(rs){
                        if(rs.code == 200){
                            upfilePath=res.data.path
                        }else {
                            layer.msg('上传失败');
                        }
                    }
                });
            }
            ,error: function(){
                //演示失败状态
                var $target = $(this.elem);
                var demoText = $target.parent().find(".msg-box")
                demoText.html('<span style="color: #FF5722;">上传失败!</span>');
            }
        });
    });
</script>
</body>

</html>
